<template>
  <div style="height: 100%;display: flex;flex-direction: column;">
    <div style="height: 50%;" class="homePageCard">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">预警通知单</div>
        <a @click="goRouter" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right"
            color="#fff"></i></a>
      </div>
      <!-- <div class="department backgroundColor NewEarlyWarn margin5-10 flexBetween padding10">
        <div>
          <router-link to="/InformationListAdd" class="LocalEW fontWeight">
            国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命〔2021〕 第03号
          </router-link>
        </div>
        <div class="Levelbtn">
          <button class="borderYellow fontWeight">黄色</button>
        </div>
      </div>
      <div class="department backgroundColor NewEarlyWarn margin5-10 flexBetween padding10">
        <div>
          <router-link to="/InformationListAdd" class="LocalEW fontWeight">
            国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命〔2021〕 第03号
          </router-link>
        </div>
        <div class="Levelbtn">
          <button class="borderYellow fontWeight">黄色</button>
        </div>
      </div> -->
      <div class="warning-list">
        <div class="warning-msg backgroundColor  flexBetween" v-for="(item, index) in noticeList" :key="index"
          :class="{ active: index == link }" @dblclick="dblclick(item.id)"
          @click="rightFlow(item.infoId, index, item.id, item.effectRange, item.warningNoticeName)">
          <div class="warning-title">
            <!-- <router-link :to="`/NoticeDetail?id=${item.id}`" class="LocalEW fontWeight">
              {{ item.warningNoticeName }}
            </router-link> -->
            <a class=" LocalEW fontWeight">
              {{ item.warningNoticeName }}
            </a>
          </div>
          <div class="Levelbtn">
            <button class="borderYellow fontWeight"
              :style='{ color: colors[item.warningLvCode], borderColor: colors[item.warningLvCode] }'>
              {{ item.warningLvName }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="homePageCard" style="flex: 1;margin-top: 16px;">
      <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
        <div class="titleName">预警信息</div>
        <a @click="goRouter1" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right"
            color="#fff"></i></a>
      </div>
      <div class="warning-list">
        <div class="warning-msg backgroundColor padding10" v-for="(item, index) in informationList" :key="index">
          <div class="warning-title">
            <router-link :to="`/InformationDetail?id=${item.id}`" class="fontWeight overflow-ellipsis"
              style="width: 80%;padding-right: 30px; ">
              {{ item.warningInfo }}
            </router-link>
            <div class="white fontSize14"><span class="overflow-ellipsis">{{ item.infoSourceName }}</span></div>
          </div>
          <div class="white fontSize14">{{ item.receiveTime }}</div>
        </div>
      </div>
      <!-- <div class="department backgroundColor NewEarlyWarn margin5-10 flexBetween padding10">
        <div>
          <router-link to="/InformationListAdd" class="LocalEW fontWeight">
            湖北省随州市暴雨橙色预警
          </router-link>
          <div class="white fontSize14">2022-9-1 11:09:32</div>
        </div>
        <div class="white fontSize14">华中分部</div>
      </div> -->
    </div>
    <LsdDialog :dialogConfig="dialogConfig" @close="close">
      <DetailedInformation slot="dialog" :ifId="ifId"></DetailedInformation>
    </LsdDialog>
  </div>
</template>

<script>
import { listPage } from "@/api/EarlyWarningManagement/yjtzd";
import { listPages } from "@/api/EarlyWarningManagement/yjxxsj";
import DetailedInformation from "./components/DetailedInformation.vue";
export default {
  name: "Information",
  components: {
    DetailedInformation
  },
  data() {

    return {
      noticeList: [],
      informationList: [],
      department: [
        {
          num: 1,
          name: "国网总部"
        },
        {
          num: 2,
          name: "华中分部"
        },
        {
          num: 3,
          name: "政府部门"
        },
        {
          num: 4,
          name: "地市公司"
        }
      ],
      link: "",
      index: 0,
      colors: {
        "1": "#02A7F0",
        "2": "#FFFF00",
        "3": "#F59A23",
        "4": "#D9001B"
      },
      dialogConfig: {
        title: "预警通知单详情",
        isShow: false, // 弹窗显示隐藏
        width: "80%"
      },
      timer: null,
      ifId: ""
    };
  },
  mounted() {
    this.getNoticeList();
    // this.getInformationList();
  },
  methods: {
    getYjtzdCity(effectRange, index = 1) {
      const arr = effectRange.split("、").filter(el => el.includes("县") || el.includes("市") || el.includes("区"));
      // const arr = effectRange.split("、");
      const newEffList = [];
      arr.forEach(el => {
        if (el.startsWith("湖北省") && (!el.endsWith("省"))) {
          newEffList.push(el.split("省")[1]);
        } else {
          newEffList.push(el);
        }
      });
      const list = [];
      newEffList.forEach(el => {
        if (el.endsWith("县") || el.endsWith("区")) {
          if (el.includes("市")) {
            list.push(el.split("市")[1]);
          } else {
            list.push(el);
          }
        } else if (el.endsWith("市")) {
          if (el.includes("自治州")) {
            list.push(el.split("自治州")[1]);
          } else {
            const index1 = el.indexOf("市");
            const index2 = el.lastIndexOf("市");
            if (index1 === index2) {
              list.push(el);
            } else {
              list.push(el.slice(index1 + 1));
            }
          }
        }
      });
      const newList = [...new Set(list)];
      if (index === 1) {
        this.$eventBus.$emit("affectCity", newList[0]);
      } else {
        this.initLayer(newList[0]);
      }
    },
    initLayer(name = "湖北省") {
      this.$eventBus.$emit("createlayer", name);
      this.$eventBus.$emit("affectCity", name);
    },
    // 预警信息列表
    getInformationList(id) {
      listPages({ noticeId: id, pageNum: 1, pageSize: 10 }).then(res => {
        this.informationList = res.data;
      });
    },
    // 跳转预警通知单列表
    goRouter(name) {
      this.$router.push({
        name: "NoticeList"
      });
    },
    // 跳转预警信息列表
    goRouter1(name) {
      this.$router.push({
        name: "InformationList"
      });
    },
    // 预警通知单
    getNoticeList() {
      // 后端约定sort字段传值默认排序
      listPage({ sort: "1", noticeState: 3 }).then(res => {
        this.noticeList = res.data;
        this.$emit("id", this.noticeList[0].id);
        if (this.noticeList.length > 0) this.getYjtzdCity(this.noticeList[0].effectRange, 1);
        if (res.data.length) {
          this.rightFlow(this.noticeList[0].infoId, 0, this.noticeList[0].id, this.noticeList[0].effectRange, this.noticeList[0].warningNoticeName);
        }
      });
    },
    dblclick(id) {
      this.ifId = id;
      this.dialogConfig.isShow = true;
      clearTimeout(this.timer);
    },

    rightFlow(infoId, index, id, effectRange, warningNoticeName) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        if (effectRange) {
          this.getYjtzdCity(effectRange, 2);
        }
        this.$emit("getWarningNoticeName", warningNoticeName);
        this.$emit("infoId", infoId);
        this.$emit("id", id);
        this.link = index;
        this.getInformationList(id);
      }, 300);
    },
    close() {
      this.dialogConfig.isShow = false;
    }
    /*   click (index) {
        this.link = index;
        console.log("选中", this.link);
      } */
  }

};
</script>

<style scoped lang="less">
.borderYellow {
  padding: 0px 10px;
  margin-top: 5px;
  //height: 100%;
  font-size: 12px;
  height: 25px;
  width: 50px;
}

.LocalEW {
  text-decoration: underline;
}

a {
  font-weight: bold;
}

.Levelbtn {
  height: 25px;
  width: 50px;
}

.active {
  // background-color: rgba(2, 167, 240, 0.21);
  border: 2px solid rgb(0, 144, 255);
}

.homePageCard {
  display: flex;
  flex-direction: column;

  .warning-list {
    flex: 1;
    overflow-y: auto;
  }
}

.warning-msg {
  padding: 5px 10px;
  border-radius: 4px;
  margin: 5px 10px 0;
  cursor: pointer;
}

.warning-msg:hover {
  border: 2px solid #0090ff;
  padding: 8px;
}

.warning-title {
  display: flex;
  justify-content: space-between;

  >a {
    font-size: 14px;
    color: #008dff;
    margin-bottom: 2px;
  }

  >div {
    width: 20%;
  }
}

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  word-break: break-all;
  -webkit-box-orient: vertical;
}
</style>
